article
  transition margin .3s
  box-sizing border-box
  position relative
  min-height calc(100vh - 10px)
  height fit-content
  min-width 1px
  #post-content p, .recent-excerpt p
    line-height 150%

.posts
  margin-top 10px
  padding-bottom 72px
  width 100%
  min-height calc(100vh - 82px)

.recent-post
  background-color var(--theme-bg-trans1)
  color var(--theme-unimportant)
  display block
  margin-bottom -1px
  border 1px solid var(--theme-unimportant)
  padding 13px 15px
  transition .3s
  .recent-info::after
    transition .3s
  .categories, .tags
    font-family BenderLight, sans-serif
  .categories
    color var(--theme-highlight)
    font-size large
    font-weight bold
    padding 0 10px 0 0
  .tags
    font-size small
    span
      display inline-block
      padding 0 5px 0 0
  time
    color var(--theme-unimportant)
    display inline-block
    text-align left
    float right
  hr
    color var(--theme-unimportant)
    border-color var(--theme-unimportant)
  img
    width 100%
  h1
    font-family sans-serif
    color var(--theme-text-light)
    margin 0
    padding 15px 0 0 0
  @media ( min-width 769px )
    &:hover
      color var(--theme-text-hover)
      background-color var(--theme-highlight)
      time, .categories
        color var(--theme-text-hover)
      a, a:active
        color var(--theme-text-rev)
      .recent-info::after
        background-color var(--theme-bg-hover)
      .recent-excerpt a, a:hover
        color var(--theme-text-light)
      hr
        color var(--theme-highlight)
        border-color var(--theme-highlight)
      figure table
        .gutter
          background-color var(--theme-border)
        .code
          background-color var(--theme-bg-trans1)
          &, &:hover
            color var(--theme-text-light)
      blockquote
        &, &:hover
          color var(--theme-text-light)
          border-color var(--theme-border)
          background-color var(--theme-bg-trans1)
      .read-more
        color var(--theme-text-light)
        background-color var(--theme-bg-hover)
      .post-sticky
        color var(--theme-text-light)
        background-color var(--theme-bg-hover)

.recent-info
  min-height 25px
  &:after
    content ''
    width 13%
    display block
    height 5px
    background-color var(--theme-highlight)
    position relative
    bottom -6px

.recent-excerpt
  margin 12px 0 28px 0

.post-sticky
  background-color var(--theme-highlight)
  color var(--theme-text-rev)
  padding 1px 2px
  margin-right 5px

.read-more
  color var(--theme-background)
  display block
  float right
  font-size smaller
  font-weight 600
  background-color var(--theme-highlight)
  margin-top -21px
  padding 3px 10px 3px 40px
  font-family BenderLight

#paginator
  width 100%
  user-select none
  margin 20px 0
  display flex
  flex-wrap wrap
  justify-content center
  position absolute
  bottom 0
  left 0
  a, span
    color var(--theme-text-light)
    font-weight bold
    margin 0 10px 0 0
    border 1px solid var(--theme-highlight)
    padding 5px 10px
    &:last-child
      margin 0
  @media ( min-width 769px )
    a:hover
      color var(--theme-text-hover)
      background-color var(--theme-highlight)
  .current
    color var(--theme-text-hover)
    background-color var(--theme-highlight)
